<template>
  <div>
    <el-dialog :visible.sync="dialogFormVisible" :title="title">
      <el-form >
        <el-form-item :label-width="formLabelWidth" label="课时标题">
          <el-input v-model="video.title" autocomplete="off"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="上传视频">
          <el-upload
            ref="upload"
            :file-list="fileList"
            :on-success="handleVideoSuccess"
            :before-upload="beforeVideoUpload"
            :auto-upload="false"
            :action="uploadPath"
            :limit="1"
            :on-exceed="handleExceed"
            class="upload-demo">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传视频文件，且不超过100mb</div>
          </el-upload>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="课时排序">
          <el-input-number v-model="video.sort" :min="0" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="是否免费">
          <el-radio v-model="video.free" :label="1">免费</el-radio>
          <el-radio v-model="video.free" :label="0">默认</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import videoApi from '@/api/video'
export default {
  data() {
    return {
      fileList: [], // 用来保存选取的要上传的视频
      uploadPath: 'http://localhost:8130/admin/vod/media/upload',
      title: '新增课时',
      video: {
        sort: 0,
        free: 0
      },
      formLabelWidth: '120px',
      dialogFormVisible: false
    }
  },
  // created() {
  //   // alert(JSON.stringify(this.video))
  //   // console.log(this.video)
  // },
  methods: {
    handleExceed() {
      this.$message.warning('只能上传一个文件')
    },
    handleVideoSuccess(res, file) {
      // 接受上传成功视频的id
      this.video.videoSourceId = res.data.id
      // 接受上传成功视频的名字
      this.video.videoOriginalName = file.name
      this.$message.success('视频上传成功')
    },
    beforeVideoUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt100M = file.size / 1024 / 1024 < 100

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      // }
      if (!isLt100M) {
        this.$message.error('上传视频大小不能超过 100MB!')
      }
      return isLt100M
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    // 接受课时id，查询要回显的课时信息，并弹出可是对话框
    open(id) {
      videoApi.getById(id).then(r => {
        this.fileList = []
        this.video = r.data.item
        this.video.free = r.data.item.free ? 1 : 0
        // 如果video有视频，可以将video的视频添加到fileList中，就可以回显到上传组件文件列表中
        if (this.video.videoOriginalName) {
          this.fileList.push({ name: this.video.videoOriginalName })
        }

        this.dialogFormVisible = true
      })
    },

    save() {
      // alert(JSON.stringify(this.video))
      videoApi.save(this.video).then(r => {
        this.$message.success('新增课时成功')
        this.$parent.getChapters()

        this.dialogFormVisible = false
      })
    },
    update() {
      videoApi.update(this.video).then(r => {
        this.$message.success('更新课时成功')
        this.$parent.getChapters()

        this.dialogFormVisible = false
      })
    },
    handleSubmit() {
      if (this.video.id) {
        // 更新
        this.update()
      } else {
        // 新增
        this.save()
      }
    }
  }
}
</script>
